<template>
  <view class="hswy-wrapper">
    <view class="main-pd">
      <HeadTitle title="党支部成员" />
      <view class="u-card u-m-b-20" v-for="item in dzbcyList" :key="item.id">
        <view class="u-flex u-flex-between">
          <view class="u-flex u-flex-items-center">
            <view class="font-32 fw-600">{{ item.cyName }}</view>
            <view class="u-m-l-12"
              ><u-image
                :src="item.sex == '女' ? icon1 : icon2"
                width="32rpx"
                height="32rpx"></u-image
            ></view>
          </view>
          <view>{{ item.phone }}</view>
        </view>
      </view>
      <view class="more" @click="$u.route('/pagesA/hswy/dzbcyList?id=' + wyId)"
        >查看更多 》</view
      >
      <HeadTitle title="党员活动风采" />
      <view class="active-list">
        <view
          class="active-item"
          v-for="item in dyhdfcList"
          :key="item.activityId"
          @click="$u.route('/pagesA/hswy/dyhdfcDetail?id=' + item.activityId)">
          <view class="u-flex">
            <view class="u-m-r-26">
              <u-image
                :src="picUrl(item.picInfo)"
                width="220rpx"
                height="146rpx"
                radius="9rpx"></u-image>
            </view>
            <view class="u-flex-grow">
              <view class="title u-line-2">{{ item.title }}</view>
              <view class="color-999 font-26">{{ item.createTime }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="more" @click="$u.route('/pagesA/hswy/dyhdfcList?id=' + wyId)"
        >查看更多 》</view
      >
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { getDzbcylistApi, getDyhdfclistApi } from "@/api/index";
import { onLoad } from "@dcloudio/uni-app";
import HeadTitle from "@/components/HeadTitle.vue";
import icon1 from "../../static/images/icon18.png";
import icon2 from "@/static/images/icon17.png";
import config from "@/config";
let wyId = ref("");
const dzbcyList = ref([]);
const getDzbcylistHandle = (id) => {
  getDzbcylistApi({
    page: 1,
    limit: 3,
    param: JSON.stringify({ wyId: id }),
  }).then((res) => {
    if (res.success) {
      dzbcyList.value = res.data;
    }
  });
};
// 获取党员活动风采
// 图片链接
let dyhdfcList = ref([]);
const picUrl = computed((url) => (url) => {
  let urlArr = url.split(",");
  return config.baseUrl + urlArr[0];
});
const getDyhdfclistHandle = (id) => {
  getDyhdfclistApi({
    page: 1,
    limit: 3,
    param: JSON.stringify({ wyId: id }),
  }).then((res) => {
    if (res.success) {
      dyhdfcList.value = res.data;
    }
  });
};
onLoad((param) => {
  wyId.value = param.id;
  getDzbcylistHandle(param.id);
  getDyhdfclistHandle(param.id);
});
</script>

<style lang="scss" scoped>
.hswy-wrapper {
  padding-top: 28rpx;
  padding-bottom: 100rpx;
  .wy-list {
    .wy-item {
      margin-bottom: 20rpx;
      position: relative;
      .title {
        color: #fff;
        font-size: 32rpx;
        font-weight: bold;
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 38rpx;
        text-align: center;
      }
    }
  }
  .active-item {
    border-bottom: 1rpx solid #f0f0f0;
    padding-bottom: 48rpx;
    margin-top: 32rpx;

    .title {
      font-size: 32rpx;
      color: #333;
      padding: 7rpx 0 58rpx 0;
    }
  }
  .more {
    text-align: center;
    padding: 20rpx 0;
    color: #999;
    font-size: 24rpx;
  }
}
</style>
